﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我的登录页面</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jqRotateVerify.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background-image: url('/myfront/image/bk.jpg'); background-size:cover">
    <div id="rotateWrap" style="margin-top:50px;">
	 
    </div>
      <table style="width: 100%;margin-top: 60px;"  align="center">
            <tr>
                <td style="width: 100%"  align="center">
                    <table style="width: 600px">
                        <tr>
                            <td>用户名：
                            </td>
                            <td>
                                <input type="text" value="admin" />
                            </td>
                        </tr>
                        <tr>
                            <td>密码：
                            </td>
                            <td>
                                <input type="text" value="" />
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <button type="button" id="Button1" style="height: 30px;" onclick="login()">登录</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>


    <script type="text/javascript">
        var myRotateVerify;
        function login() {
            alert(0);
            if(myRotateVerify.verifyState == true)
            {
                window.location.href = "main.html";
            }
            else
                alert("请拖动滑块到正确位置再点击登录");
        }

        $(function () {
            //1
              myRotateVerify = new RotateVerify('#rotateWrap', {
                initText: '滑动将图片转正',//默认
                slideImage: ['image/1.jpg', 'image/2.jpg', 'image/4.jpg'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
                slideAreaNum: 10,// 误差范围角度 +- 10(默认)
                getSuccessState: function (res) {//验证通过 返回  true;
                    console.log('例1' + res);
                }
            })
            //重置 
            $("#resetBtn").on('click', function () {
                myRotateVerify.resetSlide();
            })
            //可拿到 验证状态 
            $("#testBtn").on('click', function () {
                alert(myRotateVerify.verifyState);
            })

           
        })
</script>
</body>
</html>
